<template>
	<view class="control">
		<view class="con-1 flex-space-between">
			<view class="flex-align">
				<van-image round width="100rpx" height="100rpx" :src="Detaillist.avatar" />
				<view class="info">
					<view class="name">{{Detaillist.apply_user_name}}</view>
					<view class="time">{{Detaillist.create_at}}</view>
				</view>
			</view>
			<view class="class" style="color: #006cff;" v-if="Detaillist.status == 0">待审批</view>
			<view class="class" style="color: #00cc66;" v-if="Detaillist.status == 1">已通过</view>
			<view class="class" style="color: #006cff;" v-if="Detaillist.status == -1">已撤销</view>
			<view class="class" style="color: #ff0000;" v-if="Detaillist.status == 2">未通过</view>
		</view>
		<view class="section flex-align">
			<image mode="aspectFit"
				src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/36be1ae509e1b7a9d97d46705f645bd358825861.png" />
			类型审批详情
		</view>
		<view class="con-2">
			<view class="item flex-space-between">
				<view class="value">{{Detaillist.user_name}}</view>
				<view class="value">{{Detaillist.phone}}</view>
			</view>
			<view class="item flex-space-between">
				<view class="value">{{Detaillist.model}}</view>
				<!-- <view class="value">32次 | 237天</view> -->
			</view>

			<view class="item flex-space-between">
				<!-- <view class="label">内容</view> -->
				<view class="value1" style="color: #000;">{{Detaillist.content}}</view>
			</view>
			<view class="item flex-space-between" v-if="Detaillist.remark">
				<!-- <view class="label">内容</view> -->
				<view class="value1" style="color: #000;">备注：{{Detaillist.remark}}</view>
			</view>
		</view>
		<view class="section flex-align">
			<image mode="aspectFit"
				src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/90ce57fb9d1487c5d2afa0c40abe9c3fedff1429.png" />
			审批进程
		</view>
		<view class="con-3">
			<view class="item " v-if="Detaillist.auditor"  style=" display: flex; flex-direction: column;">
				<view class="flex-space-between">
					<view class="flex-align">
						<view class="image"  v-if="Detaillist.p1_flag == 1">
							<van-image round width="55rpx" height="55rpx" :src="Detaillist.auditor_avatar" />
							<van-icon name="checked" size="20rpx" color="#00cc66" />
						</view>
						<view class="image"  v-if="Detaillist.p1_flag == 2">
							<van-image round width="55rpx" height="55rpx" :src="Detaillist.auditor_avatar" />
							<van-icon name="more" size="20rpx" color="#ff0000" />
						</view>
						<view>
							<view class="name">{{Detaillist.auditor_name?Detaillist.auditor_name:''}}({{Detaillist.dept1?Detaillist.dept1:''}})</view>
							<view class="time">{{Detaillist.audit_time}}</view>
						</view>
					</view>
					<view class="state" v-if="Detaillist.p1_flag == 1">{{Detaillist.mini_result1}}</view>
					<view class="state await"  v-if="Detaillist.p1_flag == 2">{{Detaillist.mini_result1}}</view>
				</view>
				<view class=""  v-if="Detaillist.p1_flag == 2" style="margin-left: 75rpx;color: #bebebe;font-size: 22rpx;">
					拒绝原因:{{Detaillist.reason}}
				</view>
				<!-- <view class="state">提交审批</view> -->
			</view>
			<view class="item " v-if="Detaillist.review_id"  style=" display: flex; flex-direction: column;">
				<view class="flex-space-between">
					<view class="flex-align">
						<view class="image"  v-if="Detaillist.p2_flag == 1">
							<van-image round width="55rpx" height="55rpx" :src="Detaillist.reviewer_avatar" />
							<van-icon name="checked" size="20rpx" color="#00cc66" />
						</view>
						<view class="image"  v-if="Detaillist.p2_flag == 2">
							<van-image round width="55rpx" height="55rpx" :src="Detaillist.reviewer_avatar" />
							<van-icon name="more" size="20rpx" color="#ff0000" />
						</view>
						<view>
							<view class="name">{{Detaillist.reviewer}}({{Detaillist.dept2?Detaillist.dept2:''}})</view>
							<view class="time">{{Detaillist.review_time}}</view>
						</view>
					</view>
					<!-- <view class="state await">待审批</view> -->
					<view class="state" v-if="Detaillist.p2_flag == 1">{{Detaillist.mini_result2}}</view>
					<view class="state await"  v-if="Detaillist.p2_flag == 2">{{Detaillist.mini_result2}}</view>
				</view>
				<view class=""  v-if="Detaillist.p2_flag == 2" style="margin-left: 75rpx;color: #bebebe;font-size: 22rpx;">
					拒绝原因:{{Detaillist.reason}}
				</view>
			</view>
			<!-- <view class="item flex-space-between">
				<view class="flex-align">
					<view class="image">
						<van-image round width="55rpx" height="55rpx" src="https://img.yzcdn.cn/vant/cat.jpeg" />
						<van-icon name="more" size="20rpx" color="#006cff" />
					</view>
					<view>
						<view class="name">王大锤{{show}}</view>
						<view class="time">2020-05-30 12:23</view>
					</view>
				</view>
				<view class="state await">待审批</view>
			</view> -->
		</view>

		<view class="footer flex-space-between" v-if="Detaillist.can_show == 1">
			<view class="btn flex-center" @click="openAlert(0)">驳回</view>
			<view class="btn success flex-center" @click="openAlert(1)">待{{Detaillist.btn}}</view>
		</view>
		<!-- 审核 复审 -->
		<config-alert title="驳回" v-model="show" @confirm="confirm1"></config-alert>
		<!-- <config-alert title="通过" v-model="show2" @confirm="confirm2"></config-alert> -->
	</view>
</template>

<script>
	const personal = require("@/api/personal/index.js");
	export default {
		data() {
			return {
				show: false, //驳回
				show2: false, //通过
				note: '',
				id: '',
				Detaillist: {},
				venue_id: ''
			}
		},
		onLoad(options) {
			this.id = options.id
			this.venue_id = options.venue_id
			this.getDetail()
			uni.setNavigationBarTitle({
				title: options.model
			});
		},
		methods: {
			async getDetail() {
				let params = {
					id: this.id,
					venue_id: this.venue_id
				};
				let res = await personal.getDetail(params);
				if (res.code == 1) {
					this.Detaillist = res.data
				}
			},
			confirm() {
				this.show = false
			},
			openAlert(index) {
				if (index === 0) {
					this.show = true
				} else {
					// this.show2 = true
					let that = this;
					let postData = {
						id: this.id,
					};
					uni.showModal({
						title: '提示',
						// 提示文字
						content: '是否通过？',
						// 取消按钮的文字自定义
						cancelText: "取消",
						// 确认按钮的文字自定义
						confirmText: "确定",
						//删除字体的颜色 
						confirmColor: '#000000',
						//取消字体的颜色
						cancelColor: '#999',
						success: function(res) {
							if (res.confirm) {
								// 执行确认后的操作
								personal.doAudit(postData).then(result => {
									if (result.code == 1) {
										uni.navigateBack({
											delta: 1
										})
									}
								})
							}
						}
					})
				}
			},
			async confirm1(data) {
				let params = {
					id: this.id,
					reason: data
				};
				let res = await personal.rejectAudit(params);
				if (res.code == 1) {
					this.show = false
					uni.navigateBack({
						delta: 1
					})
				}
			},
			confirm2(data) {
				this.show2 = false
			}
		}
	}
</script>

<style scoped lang="scss">
	.control {
		min-height: 100vh;
		padding-bottom: 100rpx;

		.con-1 {
			padding: 20rpx 25rpx;
			margin-top: 20rpx;
			align-items: flex-end;

			.info {
				margin-left: 25rpx;

				.name {
					color: #333333;
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: 700;
				}

				.time {
					olor: #999999;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					margin-top: 13rpx;
				}
			}

			.class {
				color: #999999;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				transform: translateY(-10rpx);
			}
		}

		.section {
			padding: 17rpx 30rpx 18rpx;
			background-color: #f3f3f3;
			color: #635df7;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 700;

			image {
				width: 26rpx;
				height: 26rpx;
				margin-right: 15rpx;
			}
		}

		.con-2 {
			padding: 39rpx 29rpx;

			.item {
				margin-bottom: 25rpx;
				display: flex;

				.label {
					width: 200rpx;
				}

				&:last-of-type {
					margin-bottom: 0;
				}

				.name {
					color: #333333;
					font-size: 28rpx;
					font-weight: 500;
				}

				.value {
					color: #333333;
					font-size: 28rpx;
				}

				.value1 {
					flex: 1;
					color: #333333;
					font-size: 28rpx;
					// min-height: 80rpx;
				}
			}
		}

		.con-3 {
			padding: 39rpx 29rpx;

			.item {
				margin-bottom: 55rpx;
				position: relative;

				&:last-of-type {
					margin-bottom: 0;

					.image:after {
						display: none;
					}
				}

				.image {
					position: relative;
					margin-right: 20rpx;

					/deep/ .van-icon {
						position: absolute;
						right: 0;
						bottom: 0;
					}

					&::after {
						content: '';
						display: block;
						background-color: #a6a6a6;
						width: 5rpx;
						height: 55rpx;
						left: 0;
						right: 0;
						margin: auto;
						position: absolute;

					}
				}

				.name {
					color: #333333;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
				}

				.time {
					margin-top: 5rpx;
					color: #bebebe;
					font-size: 22rpx;
					font-family: PingFang SC
				}

				.state {
					color: #04b35a;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
				}

				.await {
					color: #ff0000;
				}
			}
		}

		.footer {
			position: fixed;
			bottom: 30rpx;
			padding: 0px 30rpx;
			width: 100%;

			.btn {
				width: 49%;
				background-color: #ffffff;
				border-radius: 40rpx;
				height: 80rpx;
				border: solid 1rpx #635df7;
				color: #635df7;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 700;
			}

			.success {
				color: #ffffff;
				border: none;
				background-image: linear-gradient(0deg, #635df7 0%, #a5adf6 100%);
			}
		}
	}
</style>